<script setup>
import {useStore} from "@/stores/store.js";
import {onMounted, ref, provide} from "vue";
import {useRouter,useRoute} from "vue-router";
import {followOrUnFollowTheUser, getPageInfoByAccount} from "@/api/user/user.js";
import {ElMessage} from "element-plus";
import {debounce, throttle} from "lodash";
import {goSingletonPage} from "@/api/toMusicInfo.js";

// const avatar = localStorage.getItem('avatar').trim() == '' ? 'http://fuc.free.idcfengye.com/src/assets/img/icon.png' : info.avatar
//

const isSelf = ref(false)
let username = ref(localStorage.getItem('username'))
let avatar = ref(localStorage.getItem('avatar'))

provide('isSelf', isSelf);
const isFollow = ref(false)
const followNum = ref(0)
const fansNum = ref(0)

function loadInfo() {

  // 看有没有参数 如果没有参数就是自己的主页
  if (route.query.account == null || route.query.account == localStorage.getItem('account')) {
    // username.value = localStorage.getItem('username')
    // avatar.value = localStorage.getItem('avatar')
    isSelf.value = true
    return
  } else {
    isSelf.value = false
  }

  const targetAccount = route.query.account === undefined ? localStorage.getItem('account') : route.query.account

  getPageInfoByAccount(targetAccount, localStorage.getItem('account')).then((res) => {
    if (res.data == null) {
      // 查不到
      router.push({ name : 'notfound'})
    } else {
      username.value = res.data.username
      avatar.value = res.data.avatar
      isFollow.value = res.data.isFollow
      followNum.value = res.data.followNum
      fansNum.value = res.data.fansNum
    }

  })

}
const route = useRoute()
const router = useRouter()
onMounted(() => {

  loadInfo()

})



function goto(location) {
  if (location === 0) {
    if (route.query.account !== undefined) {
      router.push('/mine/like?account=' + route.query.account)
    } else {
      router.push('/mine/like')
    }
  } else if (location === 1) {
    if (route.query.account !== undefined) {
      router.push('/mine/sheet?account=' + route.query.account)
    } else {
      router.push('/mine/sheet')
    }
  } else if (location === 2){
    if (route.query.account !== undefined) {
      router.push('/mine/recent?account=' + route.query.account)
    } else {
      router.push('/mine/recent')
    }
  }
}

const follow = throttle (() => {

  const data = {
    doFollow: !isFollow.value,
    fansAccount: localStorage.getItem('account'),
    idolAccount: route.query.account
  }

  // 发起关注或取消关注请求
  followOrUnFollowTheUser(data).then((res) => {
    ElMessage.success(res.data)
    isFollow.value = !isFollow.value
    if (isFollow.value) {
      // 说明是从取消关注到关注，粉丝数应该 +1
      fansNum.value++
    } else {
      fansNum.value--
    }
  })

}, 500)


function sendPrivateMessage() {
  goSingletonPage('/message', '?toAccount=' + route.query.account)
}
</script>

<template>
  <div class="bg">

    <div style="margin-top: 65px;border-radius: 50%;width: 110px;height: 110px;background-color: white">
      <img style="position: relative;top: 5px;left: 5px;width: 100px;height: 100px;border-radius: 50%" :src="avatar">
    </div>

    <div style="line-height: 50px;font-family: 微软雅黑 Light, serif;font-weight: 200;font-size: 30px;color: white">{{ username }}</div>

    <div class="fans-info">
      <div style="border-right: 1px solid rgba(255,255,255,0.15)">
        <div class="hover" style="line-height: 22px;font-size: 22px;">{{ followNum }}</div>
        <span style="font-size: 14px">关注</span>
      </div>
      <div style="">
        <div class="hover" style="line-height: 22px;font-size: 22px">{{ fansNum }}</div>
        <span style="font-size: 14px">粉丝</span>
      </div>
    </div>
    <div class="items">
      <router-link :to="{ name: 'mineLike', query: $route.query }">
        <span :class="{active: $route.path.startsWith('/mine/like')}">我喜欢</span>
      </router-link>
      <router-link :to="{ name: 'mineSheet', query: $route.query }">
        <span :class="{active: $route.path.startsWith('/mine/sheet')}">我创建的歌单</span>
      </router-link>
      <router-link :to="{ name: 'mineRecent', query: $route.query }" :params="{ isSelf: isSelf }">
        <span :class="{active: $route.path.startsWith('/mine/recent')}">历史播放</span>
      </router-link>


      <el-button v-if="!isSelf" style="margin-left: auto" @click="sendPrivateMessage()" class="function other-button" type="default">
        私信
      </el-button>
      <el-button @click="follow" v-if="!isSelf" class="function other-button" type="default">
        <as v-show="!isFollow">关注</as>
        <as v-show="isFollow">取消关注</as>
      </el-button>
    </div>


  </div>
  <router-view/>

</template>

<style scoped>
* {
  font-family: poppin, Tahoma, Arial, 微软雅黑, sans-serif;
}
.bg {
  background: url('../../assets/img/my-bg.png') 50% no-repeat;
  height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.fans-info {
  display: flex;
  color: white;
  margin-top: 10px;
}
.fans-info>div {
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hover {
  color: white;
}
.hover:hover {
  color: #e4836f;
  cursor: pointer;
}
.items {
  color: white;
  background: rgba(0,0,0,0.1);
  position: absolute;
  height: 57px;
  bottom: 0;
  right: 0;
  left: 0;
  padding-left: calc(50vw - 600px);
  padding-right: calc(50vw - 600px);
  display: flex;
  align-items: center;
}
.items span {
  line-height: 57px;
  margin-right: 40px;
  cursor: pointer;
  color: white;
}
.items span:hover {
  color: #e4836f;
}
.active {
  color: #e4836f!important;
}
.function {
  height: 38px;
  line-height: 38px;
  color: white;
  font-size: 14px;
//padding: 0 23px;
  width: 125.6px;
  padding-top: 10px;
  box-sizing: border-box;
  border-color: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background: rgba(24, 22, 22, 0.01);
}

.other-button {
  width: 122px!important;
}
.other-button:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
</style>
